<template>
    <div>
        <el-dialog 
        v-model="dialogVisible" 
        width="40%"
        top="30vh"
        style="max-width: 500px;"
        >
            <div>
                <p style="font-size: 18px;    margin-top: 0;">登 录</p>
                <el-form
                size="default"
                ref="loginForm"
                :model="dialogFormData"
                :rules="dialogFormRules"
                label-width="auto"
                style="width: 85%;margin: auto;text-align: left;"
                >
                    <el-form-item prop="userAccount">
                        <el-input v-model="dialogFormData.userAccount"  placeholder="请输入用户账号"  clearable >
                            <template #prefix>
                                <el-icon><UserFilled /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item  prop="userPwd">
                        <el-input v-model="dialogFormData.userPwd" type="password" show-password placeholder="请输入用户密码"  clearable >
                            <template #prefix>
                                <el-icon><Lock /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="rememberPwd">
                       <div style="width: 100%;">
                            <el-checkbox v-model="dialogFormData.rememberPwd" name="type">
                                <span>记住用户</span>
                            </el-checkbox>
                            <el-button @click="dialogVisible = false" class="registry ">用户注册</el-button>
                       </div>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" :loading="loading" size="default" @click="handleLogin" style="width: 100%;">登 录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { login } from '@/api/system/user'
import { setToken, rememberPwd, getRememberPwdInfo, setUserInfo, setLoginFlag } from "@/utils/localStorage";
import store from '@/store'
export default {
    data() {
        return {
            dialogVisible: false,
            loading:false,
            dialogFormData:{
                userAccount: '',
                userPwd: '',
                rememberPwd:true,
            },
            dialogFormRules: {
                userAccount: [
                    { required: true, message: '请输入用户账号', trigger: ['blur', 'change'] },
                ],
                userPwd: [
                    { required: true, message: '请输入用户密码', trigger: ['blur', 'change'] },
                ]
            },
        }
    },
    mounted(){
        // 记住密码之后,到登录页的时候,自动填充账号密码
        let rememberPwdInfo = getRememberPwdInfo();
        if (rememberPwdInfo && rememberPwdInfo.userAccount && rememberPwdInfo.userPwd) {
            this.dialogFormData.userAccount = rememberPwdInfo.userAccount
            this.dialogFormData.userPwd = rememberPwdInfo.userPwd
        }
    },
    methods: {
        openModal() {
            this.dialogVisible = true;
        },
        // 登录
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    login(this.dialogFormData).then(res=>{
                        console.log('res=',res,this.dialogFormData);
                        if (res.code==1) {
                            setToken(res.data.token)
                            setUserInfo(res.data)
                            if (this.dialogFormData.rememberPwd == true) {
                                rememberPwd(this.dialogFormData.userAccount,this.dialogFormData.userPwd)
                            }
                            this.$router.push({ path: "/ossweb/" })
                            store.commit('setUserInfo',res.data)
                            setLoginFlag(true)
                            this.$emit("updateLoginFlag",true)
                            this.$message.success("登录成功")
                            window.setTimeout(()=>{
                                this.dialogVisible = false
                            },500)
                        } else {
                            this.$message.error(res.message)
                        }
                        this.loading = false
                    }).catch(error=>{
                        this.loading = false
                    })
                } else {
                return false
                }
            })
        },
    },
}
</script>
<style scoped>
:deep(.el-dialog__header) {
    border:unset !important;
}

.registry {
    float: right;
    border:unset;
    padding-right: 0;
}
.registry:hover{
    background-color: unset;
}
:deep(.el-dialog__header) {
    margin-bottom: 10px !important;
}
</style>